<!-- 学术消息摘要 -->
<!-- 小鸽子 更新于 2020.8.20 -->

<!-- 小鸽子 微调css样式，删除外部循环 添加点击事件跳转页面的路径  20/8/22 -->
<!-- 小鸽子 点赞 收藏等接口 -->

<!-- 修改传参部分 9/1 -->
<!-- 9/10  修改时间样式  图片路径 用户跳转-->
<template>
	<view class="all">
		<view class="academicNew">
			<view class="academicTop">
				<!-- 图片 -->
				<view class="academicImage">
					<image :src="dataList.cover" mode="aspectFill" @tap="previewImg(dataList.cover)"></image>
				</view>
				<!-- 文字 -->
				<view class="academicContent" @tap="goAcademic"> 
					<rich-text class="academicTitle" :nodes="dataList.title"></rich-text>
					<view class="authorName">
						<text @tap.stop="goOthersInformation">{{dataList.authorName}}</text>
					</view>
					<!-- <navigator hover-class="none" :url="dataList.authorId == this.user_id ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' +dataList.authorId">{{dataList.authorName}}</navigator> -->
					<view class="academicText">
						<rich-text :nodes="dataList.pureText"></rich-text>
					</view>
				</view>
			</view>
			<!-- 时间 点赞 收藏 回复 投币 -->
			<view class="academicBottom">
				<view class="academicLeft">
					{{getTimeing(dataList.createTime)}}
				</view>
				<view class="academicRight">
					<text :class="dataList.liked? 'inxupt inxupttubiao5':'inxupt inxupttubiao4'" @tap="praise">
						<text class="academicNum">
							{{dataList.likeNumStr}}</text>
					</text>
					<text class="inxupt inxupttubiao6" @tap="goAcademic">
						<text class="academicNum">{{dataList.commentNumStr}}</text>
					</text>
					<text :class="dataList.favorited? 'inxupt inxupttubiao8':'inxupt inxupttubiao7'" @tap="collect">
						<text class="academicNum">{{dataList.favoriteNumStr}}</text>
					</text>
					<text :class="dataList.coined? 'inxupt inxupttubiao10':'inxupt inxupttubiao9'" @tap="reward">
						<text class="academicNum">{{dataList.coinsNumStr}}</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {_ajax} from '../../in-xupt-functions.js'
	export default {
		data() {
			return {
				dataList: {},
				coinTime:false,
				user_id:undefined,
				likeNumStr: '',
				coinsNumStr: ''
			}
		},
		
		methods: {
			previewImg: function(logourl){
				var that=this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					urls: imgsArray,
					current: 0,
					longPressActions: {
						itemList: ['保存到相册'],
						success: data => {
							uni.downloadFile({
								url: imgsArray[0],
								success: function(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: () => {
											uni.showToast({
												title: '保存成功',
												icon: 'none'
											});
										}
									});
								}
							});
						}
					}
				});
			},
			goOthersInformation: function() {
				uni.navigateTo({
					url: this.dataList.authorId == this.user_id ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' + this.dataList.authorId,
				})
			},
			goAcademic:function(){
				this.showArticle()
				uni.navigateTo({
					url:'/pages/Academic/Academic?postId=' + this.dataList.postId
				})
			},
			// 点赞
			praise: function() {
				const praiseUrl='/post/' + this.dataList.postId + '/like';
				
				if (this.user_id) {
					if (this.dataList.liked) {
						this.dataList.likeNum--;
					}else {
						this.dataList.likeNum++;
					}
					this.dataList.likeNumStr = this.solveNum(this.dataList.likeNum);
					console.log(this.dataList)
					this.dataList.liked = !this.dataList.liked;
				} else {
					uni.showToast({
						title: '点赞失败',
						icon: 'none',
						
					})
				}
				// 发起对应请求
				if (this.dataList.liked) {
					_ajax({
						url:praiseUrl,
						method:'POST',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '点赞成功'
						});
					})
				} else {
					_ajax({
						url:praiseUrl,
						method:'DELETE',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						});
					})
				}
			}, 
			// 收藏
			collect: function() {
				const collectUrl='/post/'+this.dataList.postId+'/favorite'
				
				if (this.user_id) {
					if (this.dataList.favorited) {
						this.dataList.favoriteNum--;
					}else {
						this.dataList.favoriteNum++;
					}
					this.dataList.favoriteNumStr = this.solveNum(this.dataList.favoriteNum);
					this.dataList.favorited = !this.dataList.favorited;
				} else {
					uni.showToast({
						title: '收藏失败',
						icon: 'none',
						
					})
				}
				if (this.dataList.favorited) {
					_ajax({
						url:collectUrl,
						method:'POST',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						});
					})
				} else {
					_ajax({
						url:collectUrl,
						method:'DELETE',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						});
					})
				}
			},
			// 投币
			reward: function() {
				const rewardUrl='/post/'+this.dataList.postId+'/coin'
				if (!this.dataList.coined) {
					_ajax({
						url:rewardUrl,
						method:'POST',
					})
					.then(res => {
						if(res.data.status == 0) {
							this.dataList.coinsNum++;
							this.dataList.coined = !this.dataList.coined
							this.dataList.coinsNumStr = this.solveNum(this.dataList.coinsNum);
							uni.showToast({
								icon: "none",
								title: "感谢投币！(p≧w≦q)"
							})	
						}else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					})
				}else {
					uni.showToast({
						icon: "none",
						title: "你已经投过币了哦~"
					})
				}
			},
			solveNum: function(num) {
				if (num >= 10000) {
					return (num / 10000).toFixed(1) + 'w';
				} else if (num >= 1000) {
					return (num / 1000).toFixed(1) + 'k';
				} else {
					return num + '';
				}
			},
			showArticle:function(){
				const showUrl='/post/' + this.dataList.postId
				_ajax({
					url:showUrl,
					method:'GET',
					
				}).then(res=>{
					console.log(res)
				})
			},
			getTimes: function(time) {
				return [time.getFullYear(), time.getMonth() + 1, time.getDate(), time.getHours(), time.getMinutes()]
			},
			getTimeing: function(timer) {
				if (timer) {
					// 得到当前时间
					let nowTime = new Date().getTime()
					// 得到评论发布时间
					let previousTime = new Date(timer).getTime()
					// 生成年月日时分秒数组，方便循环计算
					let nowTimeList = this.getTimes(new Date());
					let previousTimeList = this.getTimes(new Date(timer));
					
					// 小于24小时，显示**小时前/**分钟前
					// 超过24小时且不超过一年，显示**月**日
					// 超过一年，显示**年**月**日
					var deltaTime = nowTime - previousTime;
					
					// 小于一分钟
					if (deltaTime / 1000 < 60) {
						return '1分钟内'
					} else if (deltaTime / 1000 / 60 < 60) {
						// 一小时内显示××分钟前
						return (deltaTime / 1000 / 60).toFixed() + '分钟前'
					} else if (deltaTime / 1000 / 60 /60 < 24) {
						// 一天内显示××小时前
						return (deltaTime / 1000 / 60 / 60).toFixed() + '小时前'
					} else if (deltaTime / 1000 / 60 /60 / 24 < 7) {
						
						return (deltaTime / 1000 / 60 / 60 / 24).toFixed() + '天前'
					} else if (nowTimeList[0] == previousTimeList[0]) {
						// 大于一天且是本年发的 则显示××月××日
						return previousTimeList[1] + '-' + previousTimeList[2]
					} else {
						// 大于一天且是本年发的 则显示××××年××月××日
						return previousTimeList[0] + '-' + previousTimeList[1] + '-' + previousTimeList[2]
					}
				}else {
					return ''
				}
				
			}
		},
		watch:{
			dataList:function(nowList,preList){
				nowList.likeNumStr = this.solveNum(nowList.likeNum);
				nowList.coinsNumStr = this.solveNum(nowList.coinsNum);
				nowList.favoriteNumStr = this.solveNum(nowList.favoriteNum);
				nowList.commentNumStr = this.solveNum(nowList.commentNum);
				return this.$props.datas
			}
		},
		props:{
			datas:{
				type:Object,
				default:{}
			}
		},
		
		mounted(){
			this.dataList=this.$props.datas
			this.user_id = uni.getStorageSync('userId');
		}
		
	}
</script>

<style lang="less">
	.all {
		width: 750rpx;
		height: 320rpx;
		margin-bottom: 14rpx;
		.academicNew {
			padding: 20rpx;
			width: 100%;
			height: 320rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			.academicTop {
				width: 100%;
				height: 75%;
				// background-color: #007AFF;
				border-bottom: 1px solid #f2f2f2;
				display: flex;

				.academicImage {
					width: 90px;
					height: 90px;
					border-radius: 20rpx;
					top: 16rpx;
					left: 18rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.academicContent {
					width: 59%;
					height: 95%;
					margin-top: 8rpx;
					padding-left: 28rpx;
					// background-color: #548EC2;

					.academicTitle {
						font-weight: 800;
						font-size: 32rpx;

					}
					
					.authorName {
						width: auto;
						// margin-top: 10rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #548ec2;
					}

					.academicText {
						font-size: 32rpx;
						// margin-top: 6rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						font-weight: 600;
						-webkit-line-clamp: 3;
						line-height: 43rpx;
						-webkit-box-orient: vertical;
						width: 100%;
						height: 45%;
						color: #7f7f7f;
						// background-color: #4CD964;
					}
				}
			}

			.academicBottom {
				width: 100%;
				height: 19%;
				font-size: 24rpx;
				color: #7f7f7f;
				display: flex;
				// background-color: #548EC2;
				.academicLeft {
					width: 30%;
					// text-align: center;
					line-height: 60rpx;
					// margin-left: 18rpx;
				}

				.academicRight {
					margin-right: 10rpx;
					white-space: pre-wrap;
					width: 80%;
					line-height: 60rpx;
					text-align: right;
					.inxupt {
						font-size: 32rpx;
						margin-left: 32rpx;
					}
					
					.academicNum {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
